<template lang="html">
  <div class="header">
    <div class="header-left">北京</div>
    <div class="header-input">
      <input type="text" placeholder="输入商家/品类/商圈">
    </div>
    <div class="header-right">我的</div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style lang="stylus" scoped>
  .header
    width: 100%
    height: 1.02rem
    line-height: 1.02rem
    color: #fff
    background: #06C1AE
    display: flex
    flex-direction: row
    justify-content: space-between
    .header-left
      padding: 0 0.4rem 0 .2rem
      font-size: .32rem
    .header-input
      display: flex
      flex: 1
      input
        flex: 1
        color: #fff
        background: #05A494
        margin: .19rem 0
        padding-left: .6rem
        border-radius: .08rem
        &::-webkit-input-placeholder
          color: #68DBCE
    .header-right
      padding: 0 0.2rem
</style>
